import React, { Component } from 'react'
import "./less/Exam.less"
import { TimuListApi } from '../request/api'
import Wenda from '@/components/exam/Wenda'
import Danxuan from '@/components/exam/Danxuan'
import Bianchen from '../components/exam/Bianchen'
import Panduan from '../components/exam/Panduan'
import Duoxuan from '../components/exam/Duoxuan'

//手指触摸点
let startX = -1;
// 手指松开点 
let endX = -1;

// 当前li的索引值
let liIndex = 0;


class Exam extends Component {
  state = {
    timuArr: [],
    ulLeft: 0
  }
  componentWillUnmount() {
    startX = -1;
    endX = -1;
    liIndex = 0;
  }
  render() {
    return (
      <div className='exam_page'>
        <div className="top">
          <i className='iconfont icon-datiqia'></i>
          <section>

          </section>
        </div>
        <ul className='ul_list' style={{width:this.state.timuArr.length * 100 + "%", left:this.state.ulLeft}} 
        onTouchStart={this.handleTouchStart.bind(this)}
        onTouchMove={this.handleTouchMove.bind(this)}
        onTouchEnd={this.handleTouchEnd.bind(this)}
        
        >
          {
            this.state.timuArr.map((item, index) => (
              <li className='ul_list_li' key={index}>
                <Danxuan obj={item} />
                <Wenda obj={item} />
                <Bianchen obj={item} />
                <Panduan obj={item} />
                <Duoxuan obj={item} />
              </li>
            ))
          }

        </ul>
      </div>
    )
  }
  componentDidMount() {
    TimuListApi(this.props.location.state).then(res => {
      // console.log(res);
      if (res.errCode === 0) {
        console.log(res.data);
        this.setState({ timuArr: res.data })
      }
    })
  }

  handleTouchStart(e){
  
    startX = e.touches[0].clientX
    console.log(startX)

  }
  handleTouchMove(e){
    endX = e.touches[0].clientX;
    console.log("endx" + endX);

  }
  handleTouchEnd(e){
    let _this = this;
    // 获取滑动的范围
    if (startX > -1 && endX > -1) {
      let distance = Math.abs(startX - endX)
      // 手指滑动的距离差大于50的时候 才视为滑动
      if (distance > 50) {
        // 判断方向
        if (startX > endX) {
          liIndex--;
          // index的值 不能超过数组的长度
          if (Math.abs(liIndex) >= _this.state.timuArr.length - 1) {
            liIndex = - _this.state.timuArr.length + 1
          }
        }
        else {
          liIndex++;
          if (liIndex >= 0) {
            liIndex = 0;
          }
        }
        this.setState({ ulLeft: 100 * liIndex + '%' }, () => {
          startX = -1;
          endX = -1;
        })
      }
      else {
        return
      }
    }
  }
}


export default Exam